<script setup lang='ts'>
import { storeToRefs } from 'pinia'
import wall from '~/assets/wall.png'
import floor from '~/assets/floor.png'
import { MapTile, useMapEditStore } from '~/stores'

const props = defineProps<{
  value: MapTile
  pos: { x: number; y: number }
}>()
const { isDraging } = storeToRefs(useMapEditStore())
const { setElement } = useMapEditStore()

function handleMouseDown() {
  isDraging.value = true
  window.addEventListener('mouseup', handleMouseUp)
}
function handleMouseMove() {
  if (!isDraging.value)
    return
  setElement(props.pos)
}
function handleMouseUp() {
  isDraging.value = false
  window.removeEventListener('mouseup', handleMouseUp)
}
</script>

<template>
  <div
    class="wh-50px" :class="{
      border: value === MapTile.EMPTY,
    }"
    @click="setElement(pos)"
    @mousedown="handleMouseDown"
    @mousemove="handleMouseMove"
  >
    <img v-if="value === MapTile.WALL" wh-full :src="wall" draggable="false">
    <img
      v-if="value === MapTile.FLOOR" wh-full :src="floor" draggable="false"
    >
  </div>
</template>

<style scoped lang='scss'>

</style>
